<template>
  <div class="processAndpay">
    <el-form class="fromArea" v-if="Object.keys(form).length > 0" :model="form" :rules="rules" ref="ruleForm"
      label-width="110px">
      <el-form-item label="运单ID">
        <el-input readonly :value="form.add_id + '-' + form.yund_id" placeholder="运单ID"></el-input>
      </el-form-item>

      <el-form-item label="货品名称">
        <el-input v-model="form.goods" placeholder="备注" :readonly="inputDisabled"></el-input>
      </el-form-item>
      <el-form-item label="发货重量(吨)">
        <el-input readonly v-model="form.kg" placeholder="发货重量"></el-input>
      </el-form-item>
      <el-form-item label="收货重量(吨)" prop="shkg">
        <el-input v-model="form.shkg" placeholder="收货重量" :readonly="inputDisabled"></el-input>
      </el-form-item>
      <el-form-item label="运费单价(元)" prop="yfdj">
        <el-input v-model="form.yfdj" placeholder="运费单价" :readonly="inputDisabled"></el-input>
      </el-form-item>
      <el-form-item label="收货人名称">
        <el-input readonly v-model="form.company_name" placeholder="收货人名称"></el-input>
      </el-form-item>
      <el-form-item label="总运费(元)" prop="zyf">
        <el-input class="colorRed" v-model="form.zyf" placeholder="总运费" :readonly="inputDisabled"></el-input>
      </el-form-item>
      <el-form-item label="预支付运费(元)">
        <el-input class="colorRed" readonly v-model="form.pay_money" placeholder="预支付运费"></el-input>
      </el-form-item>
      <el-form-item label="实结金额(元)">
        <el-input class="colorRed" readonly v-model="form.real_money" placeholder="实结金额"></el-input>
        <el-button size="mini" @click="clearRest">抹零</el-button>
      </el-form-item>
      <el-form-item label="运费增补(元)">
        <el-input readonly class="colorRed" v-model="form.yfzb" placeholder="运费增补"></el-input>
      </el-form-item>
      <el-form-item label="运费扣减(元)">
        <el-input readonly class="colorRed" v-model="form.yfkj" placeholder="运费扣减"></el-input>
      </el-form-item>
      <el-form-item label="增减原因">
        <el-input v-model="form.zbyy" placeholder="增减原因" :readonly="inputDisabled"></el-input>
      </el-form-item>

      <el-form-item label="货物单价(元)">
        <el-input readonly v-model="form.danjia" placeholder="运费单价"></el-input>
      </el-form-item>
      <el-form-item label="车牌号">
        <el-input readonly v-model="form.cph" placeholder="车牌号"></el-input>
      </el-form-item>
      <el-form-item label="首笔支付(元)">
        <el-input readonly class="colorRed" v-model="form.first_payment" placeholder="首笔支付"></el-input>
      </el-form-item>
      <el-form-item label="二次支付(元)">
        <el-input readonly class="colorRed" v-model="form.TwoPayment" placeholder="二次支付"></el-input>
      </el-form-item>
      <el-form-item label="合理亏损(吨)">
        <el-input v-model="form.hlks" placeholder="合理亏损" :readonly="inputDisabled"></el-input>
      </el-form-item>
      <el-form-item label="吨差">
        <!-- <el-input v-model="form.kszl" placeholder="亏损重量"></el-input> -->
        <el-input v-model="weightDiff" placeholder="亏损重量"></el-input>
      </el-form-item>
      <el-form-item label="司机名称">
        <el-input readonly v-model="form.driver_name" placeholder="司机名称"></el-input>
      </el-form-item>
      <el-form-item label="联系方式(司机)">
        <el-input readonly v-model="form.mobile" placeholder="司机联系方式"></el-input>
      </el-form-item>
      <el-form-item label="发货地">
        <el-input readonly v-model="form.ship_address" placeholder="发货地"></el-input>
      </el-form-item>
      <el-form-item label="收货地">
        <el-input readonly v-model="form.to_address" placeholder="收货地"></el-input>
      </el-form-item>
      <el-form-item label="收款户名">
        <el-input readonly v-model="form.nhxm" placeholder="收款户名"></el-input>
      </el-form-item>
      <el-form-item label="收款账号">
        <el-input readonly v-model="form.nhk" placeholder="收款账号"></el-input>
      </el-form-item>
      <el-form-item label="开户行">
        <el-input readonly v-model="form.nhkhh" placeholder="开户行"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.beizhu" placeholder="备注" :readonly="inputDisabled"></el-input>
      </el-form-item>
      <el-form-item label="备注" style="visibility: hidden;">
        <el-input placeholder="备注"></el-input>
      </el-form-item>
      <el-form-item label="发货单">
        <el-image style="width: 40%;height: 100px;" :src="form.fhd" fit="fit" :preview-src-list="[form.fhd]"></el-image>
        <div class="imgTool">
          <el-upload class="upload-demo" :action="uploadUrl" :headers="getHeader()" :show-file-list="false"
            :on-success="(res, file) => handleAvatarSuccess(res, file, 'fhd')" :limit="1">
            <el-button size="small" type="primary" v-if="!inputDisabled">上传图片</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>

          <!-- <el-button class="btn" size="mini">上传图片</el-button> -->
          <span class="t1">*建议上传 600*410 像素的图片</span>
        </div>
      </el-form-item>
      <el-form-item label="收货单">
        <el-image style="width: 40%;height: 100px;" :src="form.shd" fit="fit" :preview-src-list="[form.shd]"></el-image>
        <div class="imgTool">
          <el-upload class="upload-demo" :action="uploadUrl" :headers="getHeader()" :show-file-list="false"
            :on-success="(res, file) => handleAvatarSuccess(res, file, 'shd')" :limit="1">
            <el-button size="small" type="primary" v-if="!inputDisabled">上传图片</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>
          <!-- <el-button class="btn" size="mini">上传图片</el-button> -->
          <span class="t1">*建议上传 600*410 像素的图片</span>
        </div>
      </el-form-item>
      <el-form-item class="toolBtn" v-if="form.xiugai == 0 || [0, 2].includes(form.status)">
        <el-button v-if="form.assign_user_id == 0" class="btn" type="primary" @click="toSave">保存</el-button>
        <el-button class="btn" type="primary" @click="toSettle">货主支付</el-button>
        <!-- <el-button class="btn" type="primary" @click="onSubmit">中原大户</el-button> -->
      </el-form-item>
    </el-form>
    <el-dialog top="5vh" class="order-dialog" :title="form.area == 0 ? '中原银行支付' : (form.area == 2 ? '兴业银行支付' : '银行')"
      :close-on-click-modal="false" :visible.sync="dialogVisible" width="50%" append-to-body>
      <OrderSettlement v-if="dialogVisible" :settlementInfo="settlementInfo" @closeDialog="closeDialog" />
    </el-dialog>
  </div>
</template>

<script>
import OrderSettlement from "./orderSettlement.vue";
import { orderSettlementInformation, savePaymentBill } from "@/api/moneyManagment";
import { uploadUrl, getHeader, handleMoney } from "@/utils/tool";
import Big from "big.js";
export default {
  name: "processAndpay",
  components: {
    OrderSettlement
  },
  props: {
    billDetail: {
      type: Object,
      default: {}
    }
  },
  mounted() {
    // this.form = obj;
    this.form = this.billDetail;
    if (this.form.xiugai != 1 || this.form.status != 1) {
      this.inputDisabled = false;
    } else {
      this.inputDisabled = true;
    }
    this.initialZYF = this.form.zyf;
    /**
     * area
     * 0：中原银行
     * 1：无
     * 2: 兴业银行
     * **/
  },
  computed: {
    //吨差
    weightDiff() {
      let shkg = new Big(this.form.shkg);//收货重量
      let kg = new Big(this.form.kg);//发货重量
      return Math.abs(shkg.minus(kg).toNumber());
    },
    showAction() {
      //已审核 已支付状态的订单不显示保存和支付按钮
      return this.form.xiugai != 1 || this.form.status != 1;
    }
  },
  data() {
    var validateZYF = (rule, value, callback) => {
      if (value === "") {
        callback();
      } else {
        if (!isNaN(value)) {
          value = Number(value).toFixed(2);
          //输入的是数字的话 同步更新到实结金额
          this.form.real_money = value;
          this.moneyCompute(value);
        } else {
          this.form.real_money = 0;
        }
        callback();
      }
    };
    var validateYFDJ = (rule, value, callback) => {
      if (value === "") {
        callback();
      } else {
        if (!isNaN(value)) {
          let shkg = new Big(this.form.shkg);//收货重量
          let price = new Big(value);//单价
          //输入的是数字的话 同步更新到实结金额
          let zongjia = price.times(shkg).toNumber();
          // this.form.real_money = zongjia;
          this.form.zyf = zongjia;
          // this.moneyCompute(zongjia);
        } else {
          this.form.real_money = 0;
        }
        callback();
      }
    };
    var validateSHKG = (rule, value, callback) => {
      if (value === "") {
        callback();
      } else {
        if (!isNaN(value)) {
          let price = new Big(this.form.yfdj);//单价
          let shkg = new Big(value);//收货重量
          //输入的是数字的话 同步更新到实结金额
          let zongjia = price.times(shkg).toNumber();
          // this.form.real_money = zongjia;
          this.form.zyf = zongjia;
          // this.moneyCompute(zongjia);
        } else {
          this.form.real_money = 0;
        }
        callback();
      }
    };
    return {
      initialZYF: 0, //初始总运费
      uploadUrl,
      getHeader,
      dialogVisible: false,
      form: {},
      rules: {
        zyf: [{ validator: validateZYF, trigger: "change" }],
        yfdj: [{ validator: validateYFDJ, trigger: "change" }],
        shkg: [{ validator: validateSHKG, trigger: "change" }]
      },
      //结算信息
      settlementInfo: {},
      inputDisabled: false,
    };
  },
  methods: {
    closeDialog() {
      this.dialogVisible = false;
      this.$emit("closeDialog");
    },
    //抹零
    clearRest() {
      this.form.zyf = handleMoney(this.form.zyf);
      this.form.real_money = handleMoney(this.form.real_money);
    },
    //费用增补，扣减
    moneyCompute(num) {
      this.initialZYF = Number(this.initialZYF);
      if (num >= this.initialZYF) {
        //增补
        this.form.yfzb = (num - this.initialZYF).toFixed(2);
        this.form.yfkj = 0;
      } else {
        //扣减
        this.form.yfkj = (this.initialZYF - num).toFixed(2);
        this.form.yfzb = 0;
      }
    },
    handleAvatarSuccess(res, file, type) {
      if (res.code == 200) {
        this.form[type] = res.data.url;
      }
    },
    async toSave() {
      let {
        yund_id,
        shkg,
        yfzb,
        zbyy,
        yfkj,
        khyy,
        yfdj,
        hlks,
        zyf,
        kszl,
        beizhu,
        fhd,
        shd,
        id,
        real_money
      } = this.form;
      let result = await savePaymentBill({
        yund_id,
        shkg,
        yfzb,
        zbyy,
        yfkj,
        khyy,
        yfdj,
        hlks,
        zyf,
        kszl,
        beizhu,
        fhd,
        shd,
        id,
        real_money
      });
      if (result.code == 200) {
        this.$message.success(result.msg);
        setTimeout(() => {
          this.$emit("closeDialog");
        }, 500);
      } else {
        this.$message.error(result.msg);
      }
    },
    async toSettle() {
      if (this.form.xiugai == 0) {
        this.$message.error('该运单还未审核,无法进行支付!');
        return;
      }

      const loading = this.$loading({
        lock: true,
        text: "Loading...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.5)",
        customClass: "loadingCss"
      });
      let result = await orderSettlementInformation({
        id: this.form.yund_id
      });
      loading.close();
      if (result.code == 200) {
        this.settlementInfo = {
          ...result.data,
          area: this.form.area,
          shkg: this.form.shkg,
          yund_id: this.form.yund_id,
          sj_id: this.form.sj_id,
          shd: this.form.shd,
          fhd: this.form.fhd,
          first_payment: this.form.first_payment,
          yfdj: this.form.yfdj,
          zyf: this.form.zyf
        };
        // first_payment: this.form.first_payment,
        // if (Number(result.data.money) < Number(this.form.real_money)) {
        //   this.$message.error('账户余额不足!')
        //   return;
        // }
        this.dialogVisible = true;
      }
    },
    onSubmit() { }
  }
};
</script>

<style lang="scss" scoped>
.processAndpay {
  .loadingCss {
    font-size: 50px;
  }

  .fromArea {
    display: flex;
    flex-wrap: wrap;

    .colorRed {
      ::v-deep .el-input__inner {
        color: $theme-Danger;
      }
    }

    .el-form-item {
      width: 30%;
      margin-right: 20px;
    }

    .toolBtn {
      width: 100%;
      // flex: 1;
      display: flex;
      justify-content: center;
      margin-top: 30px;

      .btn {
        width: 100px;
      }

      ::v-deep .el-form-item__content {
        margin-left: 0 !important;
      }
    }
  }

  ::v-deep .el-dialog__header {
    padding-top: 10px;
    padding-left: 20px;
  }

  ::v-deep .el-dialog {
    height: 60vh;

    .el-dialog__body {
      max-height: 500px;
      overflow: auto;
    }
  }

  ::v-deep .el-form-item__content {
    display: flex;

    .imgTool {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;

      .btn {
        width: 80px;
      }

      .t1 {
        margin-left: 10px;
        color: $theme-Danger;
      }
    }

    .el-select {
      width: 100%;
    }

    .el-input {
      width: 100%;
    }

    .el-button {
      margin-left: 10px;
      background-color: $theme-primary;
      color: #fff;
      border: none;
      max-height: 40px;
      // border-radius: 20px;
    }
  }
}
</style>
